<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>热力图</title>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script type="text/javascript" src="js/echarts.min.js"></script>
  <link rel="stylesheet" href="css/myCSS.css">
  <script type="text/javascript">
    var flag = false;
  </script>
</head>
<body>

<div style="float: left;width: 10%">
  <a href="http://120.27.237.68:8080/web/location.html">定位界面1</a><br/>
  <a href="http://120.27.237.68:8080/web/location2.html">定位界面2</a><br/>
  <a href="http://120.27.237.68:8080/web/TD.html">热力图2</a><br/>
</div>

<div style="float: right;width: 90%">

  <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
  <div id="main" class="locationCss2"></div>

  <script type="text/javascript">
    // 刷新间隔
    var intervalTime = 100;
    // 单位长度
    var length = 1;
    // 横轴长度
    var width = [1,2,3,4,5,6,7,8,9];
    // 纵轴长度
    var height = [1,2,3,4,5,6,7,8,9,10,11];

    $.ajaxSettings.async = false;

    var myChart = echarts.init(document.getElementById('main'));


    option = {
      tooltip: {
        position: 'top'
      },
      grid: {
        height: '50%',
        top: '10%'
      },
      xAxis: {
        type: 'category',
        data: width,
        splitArea: {
          show: true
        }
      },
      yAxis: {
        type: 'category',
        data: height,
        splitArea: {
          show: true
        }
      },
      visualMap: {
        min: 0,
        max: 10,
        calculable: true,
        orient: 'horizontal',
        left: 'center',
        bottom: '15%'
      },
      series: [{
        name: '定位热力图',
        type: 'heatmap',
        label: {
          show: true
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        }
      }]
    };

    myChart.setOption(option);

    var value = [];
    var flag = true;
    var X = [];
    var Y = [];
    var frequency = [];
    //ajax请求
    $.ajax({
      type: "get",
      async: false,
      url: "getxy",
      data: {
        status: "PLACE1"
      },
      dataType: "json",
      success: function (data) {

        for (var i = 0; i < data.length; i++) {
          flag = true;
          for (var i1 = 0;i1 < X.length;i1++){
            if (Math.ceil(data[i].x)  == X[i1] && Math.ceil(data[i].y)  == Y[i1]){
              frequency[i1]+=1;
              flag = false;
              break;
            }
          }
          if(flag){
            X.push(Math.ceil(data[i].x));
            Y.push(Math.ceil(data[i].y));
            frequency.push(1);
          }

        }

        for (var i = 0;i<X.length;i++){
          value.push([X[i],Y[i],frequency[i]]);
        }

        myChart.hideLoading(); //隐藏加载动画
        myChart.setOption({
          series: [{
            // 根据名字对应到相应的数据s
            data: value
          }]
        });

      },
      error: function () {

      }
    });
  </script>


</div>


</body>
</html>
